<!DOCTYPE html>
<html>

<head>
    <title>BootstrapValidator demo</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css" />

    <!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
    <!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />-->

    <script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <!-- form: -->
            <section>
                <div>
                    <div class="page-header">
                        <h2>Sign up</h2>
                    </div>

                    <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
                        <div class="form-row">
                            <div class="col-md-12">
                                <label class="">Full name</label>
                                <input type="text" class="form-control" name="firstName" placeholder="First name" />
                            </div>

                        </div>
                        <div class="form-row">
                            <div class="col-md-12">
                                <label class="">Last name</label>
                                <input type="text" class="form-control" name="lastName" placeholder="Last name" />
                            </div>

                        </div>

                        <div class="mt-3 col-md-9">
                            <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
                            <button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up
                                2</button>
                            <button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>
                            <button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
                        </div>
                    </form>
                </div>
            </section>
            <!-- :form -->
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            // Generate a simple captcha
            function randomNumber(min, max) {
                return Math.floor(Math.random() * (max - min + 1) + min);
            };
            $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

            $('#defaultForm').bootstrapValidator({
                //        live: 'disabled',
                message: 'This value is not valid',
                group: '.form-row .col-md-12',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    firstName: {
                        validators: {
                            notEmpty: {
                                message: 'The first name is required and cannot be empty'
                            },
                            stringLength: {
                                min: 6,
                                max: 30,
                                message: 'The username must be more than 6 and less than 30 characters long'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: 'The username can only consist of alphabetical, number, dot and underscore'
                            }
                        }
                        
                    },
                    lastName: {
                        validators: {
                            notEmpty: {
                                message: 'The last name is required and cannot be empty'
                            }
                        }
                    }
                }
            }).on('success.form.bv', function (e) {
                // Prevent submit form
                e.preventDefault();

                alert('验证通过')
            });;

            // Validate the form manually
            $('#validateBtn').click(function () {
                $('#defaultForm').bootstrapValidator('validate');
            });

            $('#resetBtn').click(function () {
                $('#defaultForm').data('bootstrapValidator').resetForm(true);
            });
        });
    </script>
</body>

</html>